<template>
	<div class='user-home-parent'>
		<TopNav
			navName="个人中心"
			color="#00493E"
			msgColor="#01937C"
			showSetting
		/>
		<div class="container">
			<div class="left">
				<div class="title">个人信息</div>
				<UserInfo />
			</div>
			<div class="right">
				<div class="title">儿童账号绑定</div>
				<div class="children">
					<Tag
						class="child"
						v-for="child in children"
						:key="child.id"
						bgColor="#FBFBFB"
						color="#003E34"
						width="324px"
						height="670px"
					>
						<div>
							<img
								class="avatar"
								:src="child.avatar"
							>
							<div class="age">{{child.age}}岁</div>
							<div class="name">{{child.name}}岁</div>
							<div class="email">{{child.email}}岁</div>
							<div class="result">
								<div class="label">改造成果</div>
								<div class="value">{{child.transformResultNum}}</div>
							</div>
							<div class="result">
								<div class="label">捐赠玩具</div>
								<div class="value">{{child.donateNum}}</div>
							</div>
							<div class="result">
								<div class="label">交换玩具</div>
								<div class="value">{{child.exchangeNum}}</div>
							</div>
						</div>
					</Tag>
					<Tag
						style="cursor: pointer;"
						class="child"
						bgColor="#FBFBFB"
						color="#003E34"
						width="100px"
						height="670px"
						border="3px solid #DEEAE8"
					>
						<Iconfont
							name="icon-a-Group2"
							size="55"
							color="#DEEAE8"
						/>
					</Tag>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import UserInfo from './components/UserInfo'

export default {
  components: {
    UserInfo
  },
  data() {
    return {
      children: [
        { id: 1, name: '沈小阳', email: 'shengxyang@gmail.com', age: 8, transformResultNum: 4, donateNum: 2, exchangeNum: 2, avatar: 'https://aha-public-1301319986.cos.ap-shanghai.myqcloud.com/static_file/yuping/userAvatar/20220312155002186-Ellipse 15.png' },
        { id: 2, name: '沈大阳', email: 'shengdyang@gmail.com', age: 12, transformResultNum: 10, donateNum: 4, exchangeNum: 3, avatar: 'https://aha-public-1301319986.cos.ap-shanghai.myqcloud.com/static_file/yuping/userAvatar/20220312155002186-Ellipse 14.png' },
      ]
    }
  },
  computed: {

  },
  methods: {

  }
}
</script>

<style lang='scss' scoped>
.user-home-parent {
  padding-top: 78px;
  background-color: $bgColor1;

  .container {
    display: flex;
    padding: 40px 60px;
    background-color: #ffffff;
    border-radius: 30px 30px 0 0;

    .title {
      margin-bottom: 20px;
      font-size: $sLarge;
      color: rgba(0, 62, 52, 0.7);
    }

    .right {
      margin-left: 50px;
      overflow-x: auto;

      .children {
        display: flex;

        .child {
          &:not(:last-of-type) {
            margin-right: 24px;
          }

          .avatar {
            margin-bottom: 24px;
          }

          .age,
          .name,
          .email {
            line-height: 25px;
            color: rgba(0, 62, 52, 0.8);
          }

          .result {
            display: flex;
            align-items: center;
            padding: 0 20px;
            margin-top: 55px;

            .label {
              margin-right: 30px;
              font-size: $sLarge;
              color: rgba(0, 62, 52, 0.6);
            }

            .value {
              font-size: 45px;
              color: $primary2;
            }
          }
        }
      }
    }
  }
}
</style>
